<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>GoodsList</title>
		<script src="/js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="/js/jquery.i18n.properties.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="/js/util.js" type="text/javascript" charset="utf-8"></script>
		<script src="/js/iscroll.js"></script>
		<link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css"/>
		<link rel="stylesheet" type="text/css" href="/css/index.css"/>
		<style type="text/css">
		.goods-item{
			border: 0.125rem #C0C0C0 solid;
			padding: 0.625rem;
			position: relative;
			cursor: pointer;
		}
			.jiage-sec{
				display: flex;
				justify-content: space-between;
			}
			.goods-item .miaoshu{
				height: 40px;
				color: #111111;
				 text-overflow: -o-ellipsis-lastline;
				   overflow: hidden;
				   text-overflow: ellipsis;
				   display: -webkit-box;
				   -webkit-line-clamp: 2;
				   line-clamp: 2;
				   -webkit-box-orient: vertical;
			}
			.col-xs-6,.col-xs-3{
				padding: 0.625rem;
			}
		.select-box{
			padding: 0.625rem;
			display: none;
			background-color: #007AFF;
			z-index: 100;
			position: absolute;
			right: 0rem;
			top: 0rem;
		}
		.select-box .language{
			margin-bottom: 0.3125rem;
		}
			.goods-item .jia::before{
				content: attr(data-content-before);
				color: #d02021;
				font-size: 2rem;
			}
			.mainbox>.row .goodspic{
				display: block;
				margin: auto;
				height: 100px;
			}
			.goods-item .jia{
				color: #d02021;
				font-size: 2rem;
			}
			.goods-item .goodspic{
				height: 200px;
				width: 100%;
			}
			.goods-item .like i{
				font-size: 2rem;
				color: #C0C0C0;
			}
			.changjia{
				border: 0.125rem #C0C0C0 solid;
				padding: 0.625rem;
				border-top: none;
			}
			.changjia .search-box{
				width: 3.05rem;
				height: 3.05rem;
				background-color:#CCCCCC ;
				border-radius: 2.5rem;
				text-align: center;
			}
			.chang-logo{
				border-radius: 2.5rem;
				border: 0.125rem solid #CCCCCC;
				text-align: center;
				width: 3.05rem;
				height: 3.05rem;
				margin-left: 0.625rem;
			}
			.flex{
				display: flex;
				align-items: center;
				justify-content: center;
			}
			.nomore{
				margin-top: 100px;
				text-align: center;
			}
			.new-logo{
				position: absolute;
				left: 0rem;
				top: 0rem;
			}
			.changjia p{
				color: #1e4e72;
				font-weight: bold;
			}
			footer{
				position: fixed;
				bottom: 0px;
				left: 0px;
				width: 100%;
				height: 250px;
			}
			#wrapper{
				/*position: absolute;*/
				/*left: 0;*/
				/*width: 100%;*/
				/*top: 20px;*/
				bottom: 0px;
				overflow: hidden;
				/* 防止本机Windows上的触摸事件 */
				-ms-touch-action: none;

				/* 防止callout tap-hold和文本的选择 */
				-webkit-touch-callout: none;
				-webkit-user-select: none;
				-moz-user-select: none;
				-ms-user-select: none;
				user-select: none;

				/* 防止文本调整取向变化对web应用程序很有用 */
				-webkit-text-size-adjust: none;
				-moz-text-size-adjust: none;
				-ms-text-size-adjust: none;
				-o-text-size-adjust: none;
				text-size-adjust: none;
			}
		.pull-loading {
			text-align: center;
			height: 40px;
			line-height: 40px;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		/* 电脑适配 */
		@media screen and (min-width: 1000px) {
			.topbg{
				width: 600px;
			}
			footer{
				width: 600px;
				margin: auto;
			}
			.goods-item{
				text-align: center;
			}
			.goods-item .goodspic{
				height: 200px;
				width: 200px;
				margin: auto;
			}
		}
		</style>
	</head>
	<body class="zh">
	<div class="container-fluid topbg">
		<div style="display: flex;justify-content: flex-start;float: left;margin-left: 8px">
			<img src="img/fanhui.png" style="width: 20px;height: 20px" onclick="fanhui()">
		</div>
		<div class="flex pull-right">
<!--			<div class="" data-lang="index_help">-->
<!--				Help-->
<!--			</div>-->
<!--			<div><img src="img/icon1.png" class="icon" /></div>-->
<!--			<div class="shuxian"></div>-->
			<div class="language">
				<img src="img/yingguo.png" class="guoqi" >
				<span>ENG</span>
			</div>
			<div>
				<a href="login.html" class="loginBtn" data-lang="login">登录</a>
			</div>
			<div class="select-box">
				<div class="language">
					<img src="img/zhongguo.png" class="guoqi" >
					<span>中文</span>
				</div>
				<div class="language">
					<img src="img/yingguo.png" class="guoqi" >
					<span>EN</span>
				</div>
				<div class="language">
					<img src="img/taiguo.png" class="guoqi" >
					<span>ภาษาไทย</span>
				</div>
				<div class="language">
					<img src="img/jianpuzhai.webp" class="guoqi" >
					<span>កម្ពុជា។</span>
				</div>
			</div>
		</div>
	</div>
		<div class="container mainbox" id="wrapper">
			<div id="scroller">
				<div class="row">

				</div>
				<div class="pull-loading" data-lang="jiazai">
					ดึงขึ้นเพื่อแสดงเพิ่มเติม
				</div>
			</div>

		</div>
<!--		<footer>-->
<!--			<h4 data-lang="index_about">ABOUT</h4>-->
<!--			<div id="border"></div>-->
<!--			<div class="about">About Thaitrade</div>-->
<!--			<div class="about">About DITP</div>-->
<!--			<div class="about">Vision & Mission</div>-->
<!--			<div class="about">Our Partners</div>-->
<!--		</footer>-->
	</body>
	<script type="text/javascript">
		var limit = 10;
		var page = 1;

		function fanhui(){
			window.history.go(-1); //返回上一页
		}
		// 加载分类商品
		$(function(){
			let width = $(window).width();
			if(width>1000) {
				$(".container").width('600px');
				$(".topbg").width('600px');
			}
			var n = 0;
			if(localStorage.getItem("yuyan")=='zh')
			{
				n=0;// 中文
				$(".topbg>.flex>.language>img").attr('src','img/zhongguo.png');
				$(".topbg>.flex>.language>span").html('中文');
			}
			else if(localStorage.getItem("yuyan")=='en')
			{
				n=1;// 英文
				$(".topbg>.flex>.language>img").attr('src','img/yingguo.png');
				$(".topbg>.flex>.language>span").html('EN');
			}
			else if(localStorage.getItem("yuyan")=='th')
			{
				n=2;// 泰语
				$(".topbg>.flex>.language>img").attr('src','img/taiguo.png');
				$(".topbg>.flex>.language>span").html('ภาษาไทย');
			}
			else if(localStorage.getItem("yuyan")=='kh')
			{
				n=3;// 泰语
				$(".topbg>.flex>.language>img").attr('src','img/jianpuzhai.webp');
				$(".topbg>.flex>.language>span").html('កម្ពុជា។');
			}
			language_pack.loadProperties(n);
			// 切换语言
			$(".topbg>.flex>.language").click(function(){
				$(".select-box").show();
				$(".select-box>.language").click(function(){
					let n = $(this).index();
					if(n==0)
						localStorage.setItem("yuyan",'zh');// 中文
					else if(n==1)
						localStorage.setItem("yuyan",'en');// 英文
					else if(n==2)
						localStorage.setItem("yuyan",'th');// 泰语
					else if(n==3)
						localStorage.getItem("yuyan",'kh');
					$(".topbg>.flex>.language>img").attr('src',$(this).find('img').attr('src'));
					$(".topbg>.flex>.language>span").html($(this).find('span').html());
					language_pack.loadProperties(n);
					window.history.go(0);
					$('.select-box').hide();
				})
			})


			// 加载分类商品
			let typeid = getQuery('typeid');
			let gname = getQuery('gname');
			if(typeid) {
				pullOnLoad();
			}
			else if(gname){
				$.ajax({
					url:`${host}/goods/searchGoodsPage?goodsName=${gname}&page=1&limit=10&yuyan=${localStorage.getItem("yuyan")}`,
					type:"get",
					success:function (res) {
						if(res.code==200){
							if(res.data.records.length>0)
							{
								page++;
								for(let i=0;i<res.data.records.length;i++){
									let s = `<div class="col-xs-6">
									<div class="goods-item" onclick="goDetail('${res.data.records[i].id}')">
									<img src="${host}/${res.data.records[i].gpicture}" width="90%" class="goodspic">
									<p class="miaoshu">${res.data.records[i].gname}</p>
									<div class="jiage-sec">
									<div class="jia" data-content-before=":before">${res.data.records[i].gprice}</div>
									<div class="like"><i class="glyphicon glyphicon-heart-empty"></i></div>
									</div>
									</div>
									</div>`;
									$(".mainbox>#scroller>.row").append(s);
								}
								let yuyan = localStorage.getItem("yuyan");
								if(yuyan=='zh')
									$('.jia').attr("data-content-before",'￥');
								else if(yuyan=='en')
									$('.jia').attr("data-content-before",'$');
								else if(yuyan=='th')
									$('.jia').attr("data-content-before",'$');
								else if (yuyan=='kh')
									$('.jia').attr("data-content-before",'$');
							}
							else{
								let s ="<div class='nomore'>没有数据显示</div>";
								let yuyan = localStorage.getItem("yuyan")
								if(yuyan=='en')
									s ="<div class='nomore'>No data to show </div>";
								else if(yuyan=='th')
									s ="<div class='nomore'>ไม่มีข้อมูลให้แสดง</div>";
								else if(yuyan=='zh')
									s ="<div class='nomore'>没有数据显示</div>";
								else if(yuyan=='kh')
									s ="<div class='nomore'>គ្មានទិន្នន័យដែលត្រូវបង្ហាញ</div>";
								$(".mainbox>#scroller>.row").append(s);
								$(".pull-loading").html("");
								$(".pull-loading").removeClass("loading");
							}
						}
					}
				})
			}
		})
		$(".goods-item").click(function(){
			window.location='goodsdetail.html'
		})
		function goDetail(id) {
			window.location='./goodsdetail.html?id='+id;
		}
		// 上拉加载
		var myscroll = new iScroll("wrapper", {
			onScrollMove: function () { //拉动时
				//上拉加载
				if (this.y < this.maxScrollY) {
					let yuyan = localStorage.getItem("yuyan")
					if(yuyan=='en')
						$(".pull-loading").html("Release loading");
					else if(yuyan=='th')
						$(".pull-loading").html("ปล่อย");
					else if(yuyan=='zh')
						$(".pull-loading").html("释放加载");
					$(".pull-loading").addClass("loading");
				} else {
					let yuyan = localStorage.getItem("yuyan")
					if(yuyan=='en')
						$(".pull-loading").html("Pull up loading ");
					else if(yuyan=='th')
						$(".pull-loading").html("ดึงขึ้นเพื่อแสดงเพิ่มเติม");
					else if(yuyan=='zh')
						$(".pull-loading").html("上拉加载");
					$(".pull-loading").removeClass("loading");
				}
			},
			onScrollEnd: function () { //拉动结束时
				//上拉加载
				if ($(".pull-loading").hasClass('loading')) {
					$(".pull-loading").html("加载中...");
					pullOnLoad();
				}
			},
       onRefresh: function () {
		   let yuyan = localStorage.getItem("yuyan")
		   if(yuyan=='en')
			   $('.pull-loading').html("Pull loading more");
		   else if(yuyan=='th')
			   $('.pull-loading').html("ดึงขึ้นเพื่อแสดงเพิ่มเติม");
		   else if(yuyan=='zh')
			   $('.pull-loading').html("上拉加载");
       		}
		});
		//上拉加载函数,ajax
		function pullOnLoad() {
			let typeid = getQuery('typeid');
			let url =`${host}/goods/getGoodsPageByType?typeId=${typeid}&page=${page}&limit=${limit}&yuyan=${localStorage.getItem("yuyan")}`;
			let gname = getQuery('gname');
			if(gname)
				url=`${host}/goods/searchGoodsPage?goodsName=${gname}&page=${page}&limit=${limit}&yuyan=${localStorage.getItem("yuyan")}`;
			$.ajax({
				url:url,
				type:"get",
				success:function (res) {
					if(res.code==200){
						if(res.data.records.length>0)
						{
							page++;
							for(let i=0;i<res.data.records.length;i++){
								let s = `<div class="col-xs-6">
									<div class="goods-item" onclick="goDetail('${res.data.records[i].id}')">
									<img src="${host}/${res.data.records[i].gpicture}" width="90%" class="goodspic">
									<p class="miaoshu">${res.data.records[i].gname}</p>
									<div class="jiage-sec">
									<div class="jia" data-content-before=":before">${res.data.records[i].gprice}</div>
									<div class="like"><i class="glyphicon glyphicon-heart-empty"></i></div>
									</div>
									</div>
									</div>`;
								$(".mainbox>#scroller>.row").append(s);
								let yuyan = localStorage.getItem("yuyan");
								if(yuyan=='zh')
									$('.jia').attr("data-content-before",'￥');
								else if(yuyan=='en')
									$('.jia').attr("data-content-before",'$');
								else if(yuyan=='th')
									$('.jia').attr("data-content-before",'$');
								else if (yuyan=='kh')
									$('.jia').attr("data-content-before",'$');
								if(yuyan=='en')
									$('.pull-loading').html("Pull loading more");
								else if(yuyan=='th')
									$('.pull-loading').html("ดึงขึ้นเพื่อแสดงเพิ่มเติม");
								else if(yuyan=='zh')
									$('.pull-loading').html("上拉加载");
							}
						}
						else{
							let yuyan = localStorage.getItem("yuyan");
							if(yuyan=='en')
								$('.pull-loading').html("no more data");
							else if(yuyan=='th')
								$('.pull-loading').html("ไม่มีข้อมูลเพิ่มเติม");
							else if(yuyan=='zh')
								$('.pull-loading').html("没有数据了");
							// let s ="<div class='nomore'>没有数据显示</div>";
							// $(".mainbox>.row").append(s);
						}
					}
				}
			});
			var resultH = window.screen.availHeight;
			console.log(resultH-150);
			$("#wrapper").css("height", resultH-150);

			myscroll.refresh();
		}

		$(function () {
			document.title="GoodsList"
		})

	</script>
	
</html>
